// 函数组件
import '../../css/GoodAdd.css'
import React, { useState, useEffect, useContext } from 'react';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { message, Upload, Button, Form, Input, Select, Switch, Modal } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { Checkbox, Col, Row } from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';

import { addGoodsData } from "@/api/GoodList";


interface DataType {
    key: string;
    // typeOfMerchandise: string;
    // size: string;
    money: string;
    // barCode: string;
    // marketPrice: number;
    // inventory: number;
    // photo: string;
    address: string;
}




const getBase64 = (img: RcFile, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
};

const beforeUpload = (file: RcFile) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
};




// const columns: ColumnsType<DataType> = [
//     {
//         title: '序号',
//         dataIndex: 'key',
//         render: (text) => <a>{text}</a>,
//     },
//     {
//         title: '商品类型',
//         dataIndex: 'typeOfMerchandise',

//     },
//     {
//         title: '尺码',
//         dataIndex: 'size',
//     },
//     {
//         title: '条形码',
//         dataIndex: 'barCode',
//     },
//     {
//         title: '价格',
//         dataIndex: 'money',
//     },
//     {
//         title: '市场价',
//         dataIndex: 'marketPrice',
//     },
//     {
//         title: '库存',
//         dataIndex: 'inventory',
//     },
//     {
//         title: '图片',
//         dataIndex: 'photo',

//     },
//     {
//         title: '操作',
//         dataIndex: 'address',
//         render: (_, record) => (

//             <Button id='del'
//                 onClick={() => showConfirm(record)}>
//                 删除</Button>




//         ),
//     },
// ];

// const data: DataType[] = [
//     {
//         key: '1',

//         money: '￥300,000.00',
//         address: 'New York No. 1 Lake Park',
//     },
//     {
//         key: '2',

//         money: '￥1,256,000.00',
//         address: 'London No. 1 Lake Park',
//     },
//     {
//         key: '3',

//         money: '￥120,000.00',
//         address: 'Sydney No. 1 Lake Park',
//     },
// ];





const onChange = (checkedValues: CheckboxValueType[]) => {
    console.log('checked = ', checkedValues);
};

const { confirm } = Modal;
const showConfirm = (record: any) => {
    confirm({
        title: '提示:',
        icon: <ExclamationCircleFilled />,
        content: '您确定要删除信息吗？删除后无法恢复！',
        cancelText: '取消',
        okText: '确认',
        onOk() {
            // 点击确定发起请求
            console.log('OK', record);
            message.success('删除成功！')
        },
    });
};

function GoodAdd() {

    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();



    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj as RcFile, (url) => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );


    const [form] = Form.useForm();//使用From表单，用于默认值


    const onFinish = async (values: any) => {
        // console.log('ddd');

        console.log(values);
        const data = ({
            goodsName: values.goodsName,
            // goodsId: values.goodsId,
            goodsSer: values.goodsSer,
            goodsStatus: values.goodsStatus == true ? '4' : '5',

        })
        try {
            let res = await addGoodsData(data)
            console.log(res);

            if (res.code == '200') {
                console.log(res.data);
                // getList()
            }
        } catch (err) {
            console.log(err);

        }
        form.resetFields()
        message.success('添加成功！')
    }



    return (
        <div className='GoodAdd'>

            <div className='GoodAdd1'>
                <div className='GoodAdd1-1'><p>添加商品</p> </div>
                <h3>基本信息</h3>
                <div className='Form1'>
                    <Form
                        form={form}
                        onFinish={onFinish}
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 14 }}
                        layout="horizontal"
                        style={{ maxWidth: 600 }}

                    >

                        <Form.Item label="商品货号" name='goodsId' rules={[{ required: true, message: '请输入商品货号' }]} >
                            <Input placeholder="请输入商品货号" />
                        </Form.Item>
                        <Form.Item label="商品名称" name='goodsName' rules={[{ required: true, message: '请输入商品名称' }]}>
                            <Input placeholder="请输入商品名称" />
                        </Form.Item>
                        <Form.Item label="商品分类" name='classify'>
                            <Select placeholder="请选择一级分类" style={{ width: 165 }}>
                                <Select.Option value="demo">外套</Select.Option>
                                <Select.Option value="demo2">冲锋衣</Select.Option>
                            </Select> ~
                            <Select placeholder="请选择二级分类" style={{ width: 165 }}>
                                <Select.Option value="demo3">外套</Select.Option>
                                <Select.Option value="demo4">冲锋衣</Select.Option>
                            </Select>
                        </Form.Item >
                        <Form.Item label="支付方式" name='modeOfPayment'>
                            <Select placeholder="请选择">
                                <Select.Option value="demo5">微信</Select.Option>
                            </Select>

                        </Form.Item>
                        <Form.Item label="供应商" name='supplier'>
                            <Select placeholder="请选择">
                                <Select.Option value="demo6">第一家</Select.Option>
                                <Select.Option value="demo7">第二家</Select.Option>
                            </Select>

                        </Form.Item>
                        <Form.Item label="店铺" name='store'>
                            <Select placeholder="请选择">
                                <Select.Option value="demo8">店铺一</Select.Option>
                                <Select.Option value="demo9">店铺二</Select.Option>
                            </Select>

                        </Form.Item>
                        <Form.Item label="品牌" name='brand'>
                            <Select placeholder="请选择品牌">
                                <Select.Option value="demo10">花花公子</Select.Option>
                                <Select.Option value="demo11">杜克恩</Select.Option>
                            </Select>

                        </Form.Item>
                        <p>（图片尺寸为200*200，单位像素，不超过2M，支持PNG、JPEG、JPG格式）</p>
                        <Form.Item label="封面图片">
                            <Upload
                                name="avatar"
                                listType="picture-card"
                                className="avatar-uploader"
                                showUploadList={false}
                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                beforeUpload={beforeUpload}
                                onChange={handleChange}
                            >
                                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                            </Upload>
                        </Form.Item>


                        <Form.Item label="视频URL" name='URL' rules={[{ required: true, message: '请输入视频URL' }]} >
                            <Input placeholder="请输入视频URL" />
                        </Form.Item>
                        <Form.Item label="销量" name='goodsSer' rules={[{ required: true, message: '请输入销量' }]}>
                            <Input placeholder="  请输入销量" />
                        </Form.Item>

                        <Form.Item label="是否包邮" name='FreeMailornot' valuePropName="checked">
                            <Switch />
                        </Form.Item>

                        <Form.Item label="服务保证 " name='service guarantees'>
                            <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
                                <Row>
                                    <Col span={12}>
                                        <Checkbox value="A">正品保证</Checkbox>
                                    </Col>
                                    <Col span={12}>
                                        <Checkbox value="B">里程抵扣兑换</Checkbox>
                                    </Col>

                                </Row>
                            </Checkbox.Group>

                        </Form.Item>
                        {/* <Form.Item className='button'>
                            <Button >添加</Button>
                        </Form.Item> */}
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit" className='reset' >
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </div>



                {/* <div className='Form2'>
                    <div className='GoodAdd1-1'><p>商品报价</p> </div>
                    <div>
                        <Table
                            columns={columns}
                            dataSource={data}
                            bordered

                        />
                    </div>

                </div> */}





            </div>

        </div>
    )
}

export default GoodAdd













